
/*.body {*/
/*    !*背景颜色*!*/
/*    background-color: blue;*/
/*    !*字体颜色*!*/
/*    color: red;*/
/*    !*字体大小*!*/
/*    font-size: 30px;*/
/*}*/
/*类选择器*/




/*.a{*/
/*    background-color: red;*/
/*}*/
/*.b{*/
/*    background-color: #de5aff;*/
/*四周离自己有多远*/
/*margin: 5px;*/
/*第一个参数 上下距离   第二个参数就是左右距离*/
/*margin: 5px 10px;*/
/* 上边距   左右边距   下边距*/
/*margin: 5px 10px 15px;*/
/*上边距  右边距  下边距  左边距*/
/*margin: 5px 10px 15px 25px;*/
/*border: 5px solid black;*/
/*padding: 5px 10px 15px 25px;*/

/*}*/
/*.c{*/
/*    background-color: #0738ff;*/
/*}*/
/*伪元素*/

/*---------------------------------*/
/*逗号，分组选择器，写完整的路径*/
/*.company, .nav, .ad {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*}*/

/*.company > div, .nav > div, .ad > div {*/
/*    width: 900px;*/
/*    border: 1px solid blue;*/
/*}*/
/*.top > div {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*}*/

/*.top > div > div {*/
/*    width: 900px;*/
/*    border: 1px solid blue;*/
/*}*/


/*-------------------test-------------*/
.test {
    border: 1px solid blue;
    /*display: flex;*/
    /*flex-direction: column-reverse;*/
    display: flex;
    justify-content: center;
}

.test > div {
    display: flex;
    flex-direction: row-reverse;
    /*justify-content: space-between;*/
    /*justify-content: flex-end;*/
    flex-wrap: wrap-reverse;
}

.test > div > div {
    width: 400px;
    border: 1px solid red;
}


/*如果css代码一样，可以写一个公共的class类，或者用分组选择器*/
/*.ad > div > div > div:nth-child(3) >div:nth-child(1)>div:nth-child(1),.ad > div > div > div:nth-child(3) >div:nth-child(1)>div:nth-child(3){*/
/*    color: white;*/
/*    font-size: 15px;*/
/*}*/
/*.ad > div > div > div:nth-child(3) >div:nth-child(1)>div:nth-child(3){*/
/*    color: white;*/
/*    font-size: 15px;*/
/*    !*margin-left: 20px;*!*/
/*}*/
/*奇偶数 奇数 odd  偶数 even*/
/*.ad > div > div > div:nth-child(3) >div:nth-child(1)>div:nth-child(odd){*/
/*        color: white;*/
/*    font-size: 15px;*/
/*}*/
/*自定义标签*/
/*pingwei{*/
/*    color: white;*/
/*    font-size: 15px;*/
/*}*/



/*------------------middle------------*/


.middle > div {
    /*border: 1px solid blue;*/
    display: flex;
    justify-content: space-between;
}

.middle > div > div {
    border: 1px solid gray;
}

.middle > div > div:nth-child(1) {
    width: 480px;

}

.middle > div > div:nth-child(2) {
    width: 400px;
}


/*-----------------------------------------------*/
.news {
    display: flex;
    justify-content: space-between;
}

.news > div:nth-child(1) {
    width: 200px;
    height: 180px;
    /*border: 1px solid red;*/
}

.news > div:nth-child(1) > img {
    width: 100%;
    height: 100%;
}

.news > div:nth-child(2) {
    width: 240px;
    /*border: 1px solid red;*/
}

.news > div:nth-child(2) > div {
    border-bottom: 1px dotted gray;
    height: 50px;
    margin-top: 10px;

}

/*----------产品---------------*/
.product {
    display: flex;
    justify-content: space-between;
}

.product > div {
    width: 185px;
    /*border: 1px solid red;*/
}

.product > div > div {
    width: 185px;

}

.product img {
    width: 185px;
    height: 120px;
}
